<template>
  <div>
    <Header></Header>
    <div>
      <img src="../../public/header.png" alt="" />
    </div>
    <div class="sec">
      <ul class="firul">
        <li>
          <span>第一分类：</span>
          <ul class="secul">
            <li
              v-for="(first, i) in nav"
              :key="i"
              :class="i == firstNum ? 'clickedNav' : ''"
              @click="firstClick(i)"
            >
              {{ first.firstKind }}
            </li>
          </ul>
        </li>
        <li>
          <span>第二分类：</span>
          <ul class="secul">
            <li
              v-for="(second, i) in secondNav"
              :class="i == secondNum ? 'clickedNav' : ''"
              :key="i"
              @click="secondClick(i)"
            >
              {{ second }}
            </li>
          </ul>
        </li>
      </ul>
      <ul class="mainList" v-if="dataList.length !== 0">
        <li v-for="ifrm in dataList" :key="ifrm.id">
          <h5>{{ ifrm.title }}</h5>
          <span>{{ ifrm.time }}</span>
          <el-link
            type="primary"
            :href="`http://localhost:3000/upload/downloadResource?r_id=${ifrm.id}`"
            >下载</el-link
          >
        </li>
      </ul>
      <el-empty :image-size="300" v-if="dataList.length == 0"></el-empty>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Header from "../components/Header.vue";
export default {
  components: { Header },
  data() {
    return {
      nav: [
        {
          firstKind: "公共",
          secondKind: ["公共"],
        },
        {
          firstKind: "哲学",
          secondKind: [
            "哲学",
            "马克思主义哲学",
            "中国哲学",
            "外国哲学",
            "逻辑学",
            "伦理学",
            "美学",
            "宗教学",
            "科学技术哲学",
          ],
        },
        {
          firstKind: "经济学",
          secondKind: [
            "理论经济学",
            "应用经济学",
            "金融",
            "应用统计",
            "税务",
            "国际商务",
            "保险",
            "资产评估",
            "审计",
          ],
        },
        {
          firstKind: "法学",
          secondKind: [
            "法学理论",
            "刑法学",
            "宪法学",
            "诉讼法学",
            "民商法学",
            "经济法学",
            "环境与资源保护法",
            "国际法学",
          ],
        },
        {
          firstKind: "教育学",
          secondKind: [
            "学前教育",
            "高等教育",
            "成人教育",
            "职业技术教育",
            "特殊教育",
            "心理学",
          ],
        },
        {
          firstKind: "文学",
          secondKind: [
            "汉语言文学",
            "中国古代文学",
            "中国现当代文学",
            "中国少数民族语言文学",
            "英语",
            "俄语",
            "法语",
            "德语",
            "日语",
            "阿拉伯语",
          ],
        },
        {
          firstKind: "历史",
          secondKind: [
            "史学史",
            "考古学",
            "历史地理学",
            "历史文献学",
            "中国古代史",
            "中国近代史",
            "世界史",
          ],
        },
        {
          firstKind: "理学",
          secondKind: [
            "数学",
            "物理学",
            "化学",
            "生物学",
            "天文学",
            "大气科学",
            "海洋科学",
            "地质学",
          ],
        },
        {
          firstKind: "工学",
          secondKind: [
            "机械工程",
            "光学工程",
            "材料科学工程",
            "电气工程",
            "电子科学与技术",
            "计算机科学与技术",
            "建筑学",
            "土木工程",
            "交通运输",
            "食品科学",
          ],
        },
        {
          firstKind: "农学",
          secondKind: [
            "作物学",
            "园艺学",
            "农业资源",
            "植物保护",
            "畜牧学",
            "兽医学",
            "林学",
            "水产",
          ],
        },
        {
          firstKind: "医学",
          secondKind: [
            "基础医学",
            "临床医学",
            "口腔医学",
            "中医学",
            "药学",
            "中药学",
            "儿童医学",
            "公共卫生与预防医学",
          ],
        },
        {
          firstKind: "军事学",
          secondKind: [
            "军事历史",
            "战略学",
            "战役学",
            "战术学",
            "军队指挥学",
            "军制学",
            "军队政治",
            "军事装备学",
          ],
        },
        {
          firstKind: "管理学",
          secondKind: [
            "管理科学与工程",
            "工商管理",
            "农林经济管理",
            "公共管理",
            "图书馆、情报与档案管理",
            "兽医学",
            "林学",
            "水产",
          ],
        },

        {
          firstKind: "艺术",
          secondKind: [
            "艺术学",
            "音乐",
            "美术",
            "设计艺术",
            "戏剧戏曲",
            "电影",
            "舞蹈",
            "广播电视艺术",
            "新闻",
          ],
        },
      ],
      secondNav: ["公共"],
      firstNum: 0,
      secondNum: 0,
      dataList: [],
    };
  },
  mounted() {
    this.getResourceData()
  },
  methods: {
    firstClick(num) {
      this.firstNum = num;
      this.secondNum = 0;
      this.secondNav = this.nav[num].secondKind;
      if(num==0)this.getResourceData();
    },
    secondClick(num) {
      this.secondNum = num;
      this.getResourceData()
    },
    getResourceData() {
      axios
        .post(`http://localhost:3000/getResource`, {
          type: this.firstNum + "-" + this.secondNum,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.dataList = ret.data.resourceList;
          }
        });
    },
  },
};
</script>

<style scoped>
.sec {
  width: 1200px;
  margin: auto;
}
.clickedNav {
  background-color: #66b1ff;
  color: white;
}
.firul {
  border-bottom: 3px solid #66b1ff;
}
.firul > li {
  display: flex;
  margin: 30px 20px;
  transition: 00.3s;
}
.secul {
  display: flex;
}
.secul > li {
  font-size: 14px;
  padding: 5px 10px;
  margin: 0 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: 00.3s;
}
.mainList {
  padding: 20px;
  min-height: 500px;
}
.mainList > li {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  padding: 20px;
  transition: 00.3s;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.mainList > li > h5 {
  width: 80%;
}
.mainList > li > span {
  color: #909399;
}
.mainList > li:hover {
  color: #66b1ff !important;
}
</style>
